<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总结vue数据监控</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <h2>学生列表</h2>
    <button @click="student.age++">年龄+1岁</button>
    <br>
    <button @click="addProperty">添加性别属性，默认值：男</button>
    <br>
    <button @click="student.gender = '未知' ">修改性别属性</button>
    <br>
    <button @click="addFriends">在列表首位添加一个朋友</button>
    <br>
    <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button>
    <br>
    <button @click="addHobby">添加一个爱好</button>
    <br>
    <button @click="updateFristHobby">修改第一个爱好为：开车</button>
    <br>

    <h2>名字：{{student.name}}</h2>
    <h2>年龄：{{student.age}}</h2>
    <h2 v-if="student.gender">性别：{{student.gender}}</h2>
    <ul>
        <li v-for="(hob, index) in student.hobby" :key="index">
            {{hob}}
        </li>
    </ul>
    <hr/>
    <ul>
        <li v-for="(item, index) in student.friends" :key="item.id"> <!--key是每一个li节点的唯一标识-->
            {{item.id}}-{{item.name}}-{{item.age}}--{{index}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: "#root",
        data: {
            student: {
                name: "tom",
                age: 18,
                hobby: ["抽烟", "喝酒", "打架"],
                friends: [
                    {id: 1, name: "jerry", age: 34},
                    {id: 2, name: "tony", age: 23},
                ]
            }
        },
        methods: {
            addProperty() {
                Vue.set(this.student, "gender", "男")
                // this.$set(this.student, "gender", "男")
            },
            addFriends() {
                this.student.friends.unshift({id: 3, name: "judy", age: 20})
            },
            updateFirstFriendName() {
                this.student.friends[0].name = "张三"
                this.student.friends[0].age = "16"
            },
            addHobby() {
                this.student.hobby.push("烫头")
            },
            updateFristHobby() {
                this.student.hobby.splice(0, 1, "开车")
                // Vue.set(this.student.hobby, 0, "开车")
                // this.$set(this.student.hobby, 0, "开车")
            }
        }
    })
</script>

</body>
</html>